<script setup lang="ts">
import type {FormInstance, FormRules} from "element-plus";
import {NOTICE_TYPE} from "~/const/Maps";
const route=useRoute();
const {type,id}=route.query;
definePageMeta({
  layout:'admin',
  title:'发布公告',
});

const formRules=reactive<FormRules>({
  title:[{required:true,message:'请输入标题',trigger:'blur'}],
  synopsis:[
      {max:100,message:'简介不能超过100个字符',trigger:'blur'}
  ],
  content:[{required:true,message:'请输入内容',trigger:'blur'}],
})
const formRef=ref<FormInstance>();
const form=reactive({
  id:'',
  title:'',//标题
  img:[],
  content:'',//这就是内容33
  type:route.query.type??10,//类型
  synopsis:'',//简介
  is_up:1,//是否上架
})
const tags=useTagsStore();
const title=ref(NOTICE_TYPE[form.type])
const submit=async ()=>{
  if(!formRef.value) return
  await formRef.value?.validate()
  form.is_up=form.is_up?1:0;
  const {code,data}=await usePost(form.id?'/backend/notice/update':'/backend/notice/create',{...form,img:form.img?.[0]?.url})
  if(code===200){
    ElMessage.success(form.id?'编辑成功':'创建成功')
    navigateTo(`/backend/notice?type=${form.type}`)
  }
}
watchEffect(async ()=>{
  if(route.query.id){
    const {data,code}=await useGet('/backend/notice/getDetail',{id:route.query.id});
    if(code==200){
      form.id=id;
      form.title=data.title;
      form.content=data.content;
      form.is_up=data.is_up;
      form.type=`${data.type}`??route.query.type;
      form.synopsis=data.synopsis;
      if(data.img){
        form.img=[{url:data.img,name:'封面图'}];
      }else{
        form.img=[];
      }

    }
  }
})
const cancelWatch=watch(()=>route.query.type,()=>{
  form.type=route.query.type as string;
  title.value=NOTICE_TYPE[form.type]
  formRef.value?.resetFields()
  formRef.value?.clearValidate()
  tags.setTitle(route.path,`创建${title.value}`)
})
onUnmounted(()=>{
  cancelWatch()
})
</script>

<template>
<el-card class="mt-4">

  <el-form :model="form" :rules="formRules" ref="formRef" label-width="120px" width="600">
    <el-form-item label="id" v-if="form.id">
      {{form.id}}
    </el-form-item>
    <el-form-item label="标题" prop="title">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="内容" prop="content">
      <MyEdit v-model="form.content"></MyEdit>
    </el-form-item>
    <el-form-item label="简介" prop="synopsis">
      <el-input v-model="form.synopsis" type="textarea" maxlength="100"></el-input>
    </el-form-item>
    <el-form-item label="类型">
      <el-radio-group v-model="form.type">
        <el-radio :label="label" :value="value" v-for="(label,value) in NOTICE_TYPE"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="封面图" prop="img">
      <div class="w-[200px]">
        <MyUpload :limit="1"  :multiple="false" desc="封面图" v-model="form.img"></MyUpload>
      </div>

    </el-form-item>
    <el-form-item label="是否立即上线" prop="is_up">
      <el-switch v-model="form.is_up" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否"></el-switch>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form-item>
  </el-form>
</el-card>
</template>

<style scoped lang="scss">

</style>